<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-25 09:27:16
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2023-11-29 15:56:29
 * @FilePath: /h-radar-expose/pages/Exposure/ExposeList/mobileDetial.vue
 * @Description: 移动应用详情页面
-->
<template>
  <Detail
    :title-btn="titleBtn"
    :left-num="2"
    :head-num="3"
    :tabs-list="tabsList"
    :tab-active="tabActive"
    @showPrompt="showPrompt"
  >
    <!-- 左侧 -->
    <template #title>
      <el-tooltip effect="dark" :content="basicInfo.name" placement="bottom">
        <span>{{ basicInfo.name }}</span>
      </el-tooltip>
    </template>
    <template #content-title-1>基本信息</template>
    <template #content-body-1>
      <LayoutInfoList :info-list="infoList"></LayoutInfoList>
    </template>
    <template #content-title-2>标签</template>
    <template #content-body-2>
      <TagManip
        :dynamic-tags="basicInfo.tag"
        @handleClose="delTag"
        @handleAdd="addTag"
      ></TagManip>
    </template>
    <!--右侧 -->
    <template #right-head>
      <AssessmentBlock :block-list="blockList"></AssessmentBlock>
    </template>
    <template #tab-content-assetProfile>
      <LayoutDraw :left-num="1">
        <template #content-title-1>基础信息</template>
        <template #content-body-1>
          <LayoutExpandableBox
            v-for="(item1, index) in expandableList"
            :key="index"
            :expandable-info="item1"
          >
          </LayoutExpandableBox>
        </template>
        <template #right-title>资产变更记录</template>
        <template #right-body>
          <LayoutNoticeList :notice-list="noticeList"></LayoutNoticeList>
        </template>
      </LayoutDraw>
    </template>
    <template #tab-content-exposurePath>
      <GraphExposurePath :row-list="rowList"></GraphExposurePath>
    </template>
    <template #tab-content-associatedExposure>
      <GraphExposureSurface :row-list="rowList"></GraphExposureSurface>
    </template>
    <template #tab-content-surfaceAnalysis> </template>
  </Detail>
</template>

<script lang="ts" setup>
import Detail from '@/components/Expose/Layout/Detail.vue';
import LayoutInfoList from '@/components/Expose/Layout/InfoList.vue';
import LayoutFormList from '@/components/Expose/Layout/FormList.vue';
import LayoutExpandableBox from '@/components/Expose/Layout/ExpandableBox.vue';
import LayoutNoticeList from '@/components/Expose/Layout/NoticeList.vue';
import LayoutDraw from '@/components/Expose/Layout/Draw.vue';
import GraphExposurePath from '@/components/Expose/Graph/ExposurePath.vue';
import GraphExposureSurface from '@/components/Expose/Graph/ExposureSurface.vue';
import GraphSurfaceAnalysis from '@/components/Expose/Graph/SurfaceAnalysis.vue';
import ModelList from '@/components/Expose/ModelList.vue';
import TagManip from '@/components/Expose/TagManip.vue';
import AssessmentBlock from '@/components/Expose/AssessmentBlock.vue';
import ShowCode from '@/components/Expose/ShowCode.vue';
import noData from '@/components/Expose/noData.vue';
import { usewebDetail } from '@/composables/Expose/usewebDetail';
import { useRoute } from 'vue-router';
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const {
  detialInfo,
  basicInfo,
  delTag,
  addTag,
  showPrompt,
  category,
  blockList,
  changeList,
  getDetialById,
  getLeftBaseInfo,
  getAssetChanged,
  getAnalysis,
} = usewebDetail();
const id = ref(route.query.id || '');
const tabActive = ref('assetProfile');
const tabsList = ref([
  {
    name: 'assetProfile',
    label: '资产画像',
    disabled: false,
  },
  {
    name: 'exposurePath',
    label: '资产暴露路径',
    disabled: false,
  },
  {
    name: 'associatedExposure',
    label: '关联暴露面',
    disabled: false,
  },
  // {
  //   name: 'surfaceAnalysis',
  //   label: '攻击面分析',
  //   disabled: false,
  // },
]);
// const blockList = ref([
//   {
//     title: '暴露风险评估',
//     img: '',
//     tip: '',
//     list: [],
//   },
//   {
//     title: '资产暴露程度评估',
//     img: '',
//     tip: '',
//     list: [],
//   },
//   {
//     title: '易受攻击性评估',
//     img: '',
//     tip: '',
//     list: [],
//   },
// ]);

const whoisList = ref([]);
const titleBtn = computed(() => {
  const urlList = ['http', 'https'];
  let array = [
    {
      flag: 'url',
      tip: '访问',
      icon: 'vul-icon-url',
    },
  ];

  if (!urlList.includes(basicInfo.value.protocol)) {
    array = array.filter((el) => el.flag !== 'url');
  }

  return array;
});
const infoList = computed(() => {
  const { dataStatus, isAlive, createTime, updateTime, company } =
    basicInfo.value;

  const foundStatus = store.state.enum.assetStatus.find(
    (status) => status.type === parseInt(dataStatus),
  );

  return [
    {
      label: '更新状态',
      icon: 'vul-icon-type',
      type: 'tag',
      tag: foundStatus ? foundStatus.tag : '',
      content: foundStatus ? foundStatus.value : '未知',
    },
    {
      label: '存活状态',
      icon: 'vul-icon-type',
      type: 'img',
      src: isAlive
        ? require(`@/static/images/icon/survival-${parseInt(isAlive)}.png`)
        : '',
    },
    {
      label: '首次发现',
      icon: 'vul-icon-time',
      content: createTime,
    },
    {
      label: '数据更新',
      icon: 'vul-icon-time',
      content: updateTime,
    },
    {
      label: '所属单位',
      icon: 'vul-icon-company',
      content: company,
    },
  ];
});
const noticeList = computed(() => {
  return changeList.value.map(
    ({ fieldAlias, newValue, oldValue, changeTime, opType }) => {
      const btn = store.state.enum.changeStatus.find(
        ({ type }) => type === opType,
      );

      return {
        title: fieldAlias,
        content: opType === 3 ? oldValue : newValue,
        time: changeTime,
        type: btn ? btn.tag : '',
        typeText: btn ? btn.value : '',
      };
    },
  );
});
const expandableList = computed(() => {
  const list = [{ ...detialInfo.value }];
  return list.map((el) => {
    return {
      labelLength: 112,
      head: [
        {
          label: '泄露源地址',
          content: el.sourceUrl,
        },
      ],
      body: [
        {
          label: '小程序图标',
          content: el.radarIconUrl,
          type: 'img',
        },
        {
          label: '小程序名称',
          content: el.name,
        },
        {
          label: '简介',
          content: el.introduction,
        },
      ],
    };
  });
});
const rowList = computed(() => {
  return {
    assetId: id.value,
    assetType: category.value,
  };
});
onMounted(async () => {
  category.value = 'miniProgram';
  await getDetialById('detail/getMiniProgramById');
  await getLeftBaseInfo();
  await getAssetChanged();
  await getAnalysis();
});
</script>

<style lang="scss" scoped>
.domain-container {
  display: inline-block;
  height: 145px;
  overflow: auto;
  width: 100%;
}
</style>
